'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  ArrowLeft,
  ArrowRight,
  TrendingUp,
  Database,
  CreditCard,
  Shield,
} from 'lucide-react';
import { cn } from '@/lib/utils';

interface Solution {
  id: string;
  title: string;
  description: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
  color: string;
  metrics: {
    label: string;
    value: string;
  }[];
}

const solutions: Solution[] = [
  {
    id: 'high-frequency-trading',
    title: '高频交易系统',
    description: '微秒级延迟，百万TPS的超高性能交易系统',
    href: '/solutions/high-frequency-trading',
    icon: TrendingUp,
    color: 'bg-blue-500',
    metrics: [
      { label: '延迟', value: '< 10μs' },
      { label: 'TPS', value: '1.2M' },
    ],
  },
  {
    id: 'distributed-ledger',
    title: '分布式账本',
    description: '事件溯源和CQRS架构的企业级账本系统',
    href: '/solutions/distributed-ledger',
    icon: Database,
    color: 'bg-green-500',
    metrics: [
      { label: '一致性', value: '100%' },
      { label: '查询', value: '< 50ms' },
    ],
  },
  {
    id: 'real-time-payment',
    title: '实时支付处理',
    description: '流处理架构的高性能支付处理系统',
    href: '/solutions/real-time-payment',
    icon: CreditCard,
    color: 'bg-purple-500',
    metrics: [
      { label: '处理延迟', value: '< 100ms' },
      { label: '吞吐量', value: '50K TPS' },
    ],
  },
  {
    id: 'intelligent-risk-control',
    title: '智能风控系统',
    description: 'AI驱动的实时风险管理和决策系统',
    href: '/solutions/intelligent-risk-control',
    icon: Shield,
    color: 'bg-red-500',
    metrics: [
      { label: '准确率', value: '99.2%' },
      { label: '响应时间', value: '< 50ms' },
    ],
  },
];

/**
 * 解决方案导航组件
 * 提供解决方案页面间的快速导航和概览
 */
export function SolutionsNavigation() {
  const pathname = usePathname();
  const currentSolutionId = pathname.split('/').pop();
  const currentIndex = solutions.findIndex(s => s.id === currentSolutionId);

  const prevSolution = currentIndex > 0 ? solutions[currentIndex - 1] : null;
  const nextSolution =
    currentIndex < solutions.length - 1 ? solutions[currentIndex + 1] : null;

  return (
    <div className="space-y-8">
      {/* 解决方案概览网格 */}
      <SolutionsGrid currentPath={pathname} />

      {/* 上一个/下一个导航 */}
      {(prevSolution || nextSolution) && (
        <div className="flex justify-between items-center pt-8 border-t">
          <div className="flex-1">
            {prevSolution && (
              <Link href={prevSolution.href}>
                <Button variant="outline" className="group">
                  <ArrowLeft className="mr-2 h-4 w-4 group-hover:-translate-x-1 transition-transform" />
                  <div className="text-left">
                    <div className="text-xs text-muted-foreground">
                      上一个解决方案
                    </div>
                    <div className="font-medium">{prevSolution.title}</div>
                  </div>
                </Button>
              </Link>
            )}
          </div>

          <div className="flex-1 text-right">
            {nextSolution && (
              <Link href={nextSolution.href}>
                <Button variant="outline" className="group">
                  <div className="text-right">
                    <div className="text-xs text-muted-foreground">
                      下一个解决方案
                    </div>
                    <div className="font-medium">{nextSolution.title}</div>
                  </div>
                  <ArrowRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
                </Button>
              </Link>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

/**
 * 解决方案网格组件
 */
function SolutionsGrid({ currentPath }: { currentPath: string }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {solutions.map(solution => {
        const IconComponent = solution.icon;
        const isActive = currentPath.includes(solution.id);

        return (
          <Link key={solution.id} href={solution.href}>
            <Card
              className={cn(
                'group hover:shadow-lg transition-all duration-300 cursor-pointer h-full',
                isActive
                  ? 'ring-2 ring-blue-500 bg-blue-50 dark:bg-blue-950'
                  : 'hover:shadow-xl bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0'
              )}
            >
              <CardContent className="p-4">
                <div className="flex items-center gap-3 mb-3">
                  <div
                    className={cn('p-2 rounded-lg text-white', solution.color)}
                  >
                    <IconComponent className="h-4 w-4" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h4
                      className={cn(
                        'font-semibold text-sm truncate',
                        isActive
                          ? 'text-blue-700 dark:text-blue-300'
                          : 'group-hover:text-blue-600'
                      )}
                    >
                      {solution.title}
                    </h4>
                  </div>
                  {isActive && (
                    <Badge
                      variant="secondary"
                      className="bg-blue-100 text-blue-800 text-xs"
                    >
                      当前
                    </Badge>
                  )}
                </div>

                <p className="text-xs text-muted-foreground mb-3 line-clamp-2">
                  {solution.description}
                </p>

                <div className="space-y-1">
                  {solution.metrics.map((metric, index) => (
                    <div
                      key={index}
                      className="flex justify-between items-center text-xs"
                    >
                      <span className="text-muted-foreground">
                        {metric.label}
                      </span>
                      <span className="font-medium">{metric.value}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </Link>
        );
      })}
    </div>
  );
}

/**
 * 简化版解决方案导航 - 用于页面底部
 */
export function SolutionsNavigationSimple() {
  const pathname = usePathname();
  const currentSolutionId = pathname.split('/').pop();
  const currentIndex = solutions.findIndex(s => s.id === currentSolutionId);

  const prevSolution = currentIndex > 0 ? solutions[currentIndex - 1] : null;
  const nextSolution =
    currentIndex < solutions.length - 1 ? solutions[currentIndex + 1] : null;

  if (!prevSolution && !nextSolution) return null;

  return (
    <div className="flex justify-between items-center py-8 border-t bg-muted/30">
      <div className="flex-1">
        {prevSolution && (
          <Link href={prevSolution.href} className="group">
            <div className="flex items-center gap-3 p-4 rounded-lg hover:bg-background transition-colors">
              <ArrowLeft className="h-5 w-5 text-muted-foreground group-hover:-translate-x-1 transition-transform" />
              <div>
                <div className="text-sm text-muted-foreground">上一个</div>
                <div className="font-semibold group-hover:text-blue-600 transition-colors">
                  {prevSolution.title}
                </div>
              </div>
            </div>
          </Link>
        )}
      </div>

      <div className="flex-1 text-right">
        {nextSolution && (
          <Link href={nextSolution.href} className="group">
            <div className="flex items-center justify-end gap-3 p-4 rounded-lg hover:bg-background transition-colors">
              <div className="text-right">
                <div className="text-sm text-muted-foreground">下一个</div>
                <div className="font-semibold group-hover:text-blue-600 transition-colors">
                  {nextSolution.title}
                </div>
              </div>
              <ArrowRight className="h-5 w-5 text-muted-foreground group-hover:translate-x-1 transition-transform" />
            </div>
          </Link>
        )}
      </div>
    </div>
  );
}

/**
 * 解决方案面包屑导航
 */
export function SolutionsBreadcrumb() {
  const pathname = usePathname();
  const currentSolutionId = pathname.split('/').pop();
  const currentSolution = solutions.find(s => s.id === currentSolutionId);

  if (!currentSolution) return null;

  return (
    <nav className="flex items-center space-x-2 text-sm text-muted-foreground mb-6">
      <Link href="/" className="hover:text-foreground transition-colors">
        首页
      </Link>
      <span>/</span>
      <Link
        href="/solutions"
        className="hover:text-foreground transition-colors"
      >
        金融解决方案
      </Link>
      <span>/</span>
      <span className="text-foreground font-medium">
        {currentSolution.title}
      </span>
    </nav>
  );
}
